<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加物资</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css"   media="all">
    <link th:include="admin/adminGoodsUtils-common::commonheader">
    <style>
        .layui-upload-img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div th:replace="admin/adminGoodsUtils-common::#commonbody1"></div>
    <div th:replace="admin/adminGoodsUtils-common::#commonbody2"></div>
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <h3 class="mb-0 text-uppercase">添加物品</h3>
            <hr/>
            <div class="card " >
                <div class="card-body">
                    <div class="layui-upload">
                        <form class="layui-form" th:action="@{/addSupply}" method="post" enctype="multipart/form-data">
                            <div class="layui-form-item">
                                <label class="layui-form-label">物品名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="adminGoodsUtils" id="adminGoodsUtils" lay-verify="title" autocomplete="off" placeholder="请输入物品名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">物品数量</label>
                                <div class="layui-input-block">
                                    <input type="text" name="number" id="number" lay-verify="title" placeholder="请输入物品数量" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">物品种类</label>
                                <div class="layui-input-block">
                                    <select name="pid" id="pid" lay-filter="aihao">
                                        <option value="1" selected="">蔬菜</option>
                                        <option value="5">水果</option>
                                        <option value="9">日用品</option>
                                        <option value="14">肉类</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">物品简介</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="可以无" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload layui-input-block">

                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                                <div style="width: 200px;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="layui-form-item" style="text-align: center;margin-right: 110px" >
                                <div class="layui-input-block ">
                                    <button type="submit" class="layui-btn" id="submit" name="submit" >立即提交</button>
                                </div>
                            </div>
                            <a name="list-progress"> </a>
                            <div style="margin-top: 10px;"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="layuiadmin/layui/layui.js" charset="utf-8"></script>
<div th:include="admin/adminGoodsUtils-common::#commontail"></div>
<script th:inline="javascript">
    layui.use(['upload', 'element', 'layer'], function() {
        var ctxPath=[[@{/}]];
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'https://httpbin.org/post'
            , auto: false   //是否自动上传
            , accept: 'images'   //指定允许上传的文件类型
            , bindAction: '#submit'//指向一个按钮触发上传
            , data: { adminGoodsUtils:$('#adminGoodsUtils').val(),number:$('#number').val(),pid:$('pid').val()
            }
            , choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('加载中', {icon: 16, time: 0});
                element.progress('demo', 100 + '%'); //可配合 layui 进度条元素使用
                layer.msg('上传完毕', {icon: 1});

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    })
</script>
</body>
</html>
